<template>
  <Crad :title="cardTitle" :opration-text="oprationText" @opration="emtis('to-all')">
    <view class="personnels-container">
      <view class="personnel" v-for="(item, index) in personnelList" :key="index">
        <TImage
          errorImgType="person"
          :src="item.avatar"
          mode="aspectFill"
          width="80rpx"
          height="80rpx"
          border-radius="50%"
        ></TImage>
      </view>
    </view>
  </Crad>
</template>
<script setup lang="ts">
  import type { IPrticipantsListResData } from '@/api/activity/types';
  import TImage from '@/components/TImage/index.vue';
  import Crad from '@/components/Crad/index.vue';
  import { computed, type PropType } from 'vue';

  const props = defineProps({
    personnelList: {
      type: Array as PropType<IPrticipantsListResData[]>,
      default: undefined,
    },
    registrationsNumber: {
      type: Number,
      default: 0,
    },
    oprationText: {
      type: String,
      default: '',
    },
    /**剩余位置 */
    remainingSeats: {
      type: Number,
      default: 0,
    },
    enrollRestrict: {
      type: Number,
      default: 0,
    },
    openRegNum: {
      type: Number,
      default: 0,
    },
  });

  const emtis = defineEmits(['to-all']);

  const cardTitle = computed(() => {
    const { registrationsNumber, remainingSeats, enrollRestrict, openRegNum } = props;
    if (!openRegNum) return '已报名人员';
    if (enrollRestrict) {
      return `已报名(${registrationsNumber}/${remainingSeats})`;
    }
    return `已报名(${registrationsNumber})`;
  });
</script>
<style lang="scss" scoped>
  .personnels-container {
    display: flex;
    gap: 32rpx;
  }
</style>
